<template>
  <div class="ai-chat-dialog-wrapper">
    <transition name="fade">
      <div v-if="expanded" class="ai-chat-dialog-expanded">
        <div class="ai-chat-header">
          <span class="ai-title">
            <el-icon class="ai-icon"><Service /></el-icon>
            智能客服
          </span>
          <el-icon class="toggle-btn" @click="toggleDialog"><ArrowUpBold /></el-icon>
        </div>
        <div class="chat-history">
          <div v-for="(msg, idx) in messages" :key="idx" :class="['msg-row', msg.role]">
            <div class="avatar-box">
              <el-avatar v-if="msg.role === 'user'" :src="userAvatar" :icon="!userAvatar ? 'User' : undefined" size="32" />
              <el-avatar v-else :src="aiAvatar" size="32" />
            </div>
            <div class="msg-bubble">
              <span>{{ msg.content }}</span>
            </div>
          </div>
        </div>
        <div class="chat-input-row">
          <el-input v-model="input" @keyup.enter="send" placeholder="请输入你的问题..." size="large" class="chat-input" />
          <el-button type="primary" @click="send">发送</el-button>
        </div>
      </div>
      <div v-else class="ai-chat-dialog-collapsed">
        <div class="collapsed-bar">
          <el-icon class="ai-icon"><Service /></el-icon>
          <span class="collapsed-title">智能客服</span>
          <el-input v-model="input" @keyup.enter="send" placeholder="请输入你的问题..." size="small" class="collapsed-input" />
          <el-button type="primary" size="small" @click="send">发送</el-button>
          <el-icon class="toggle-btn" @click="toggleDialog"><ArrowDownBold /></el-icon>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import axios from 'axios';
import { Service, ArrowDownBold, ArrowUpBold} from '@element-plus/icons-vue';
export default {
  props: {
    userAvatar: { type: String, default: '' }
  },
  data() {
    return {
      input: '',
      messages: [],
      expanded: false,
      aiAvatar: '/AIChatIcon.jpg'
    };
  },
  methods: {
    toggleDialog() {
      this.expanded = !this.expanded;
    },
    async send() {
      if (!this.input.trim()) return;
      const question = this.input;
      this.messages.push({ role: 'user', content: question });
      this.input = '';
      // 如果当前是收起状态，发送后自动展开
      if (!this.expanded) {
        this.expanded = true;
      }
      try {
        const res = await axios.post('/api/ai/ask', question, {
          headers: { 'Content-Type': 'text/plain' }
        });
        this.messages.push({ role: 'ai', content: res.data });
      } catch (e) {
        this.messages.push({ role: 'ai', content: 'AI服务暂时不可用，请稍后再试。' });
      }
    }
  },
  components: {
    Service,
    ArrowDownBold,
    ArrowUpBold
  }
};
</script>

<style scoped>
.ai-chat-dialog-wrapper {
  width: 100%;
  margin: 0 auto 30px auto;
  max-width: none;
}
.ai-chat-dialog-collapsed {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 10px 24px;
}
.ai-chat-dialog-expanded {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  padding: 0 0 24px 0;
  margin: 0 0 32px 0;
  width: 100%;
  min-width: 0;
  max-width: none;
  transition: box-shadow 0.2s;
}
.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px 10px 32px;
  border-bottom: 1px solid #f0f0f0;
}
.ai-title {
  font-size: 18px;
  font-weight: 600;
  color: #409EFF;
  display: flex;
  align-items: center;
}
.ai-icon {
  margin-right: 8px;
  font-size: 22px;
}
.toggle-btn {
  cursor: pointer;
  font-size: 20px;
  color: #bbb;
  transition: color 0.2s;
}
.toggle-btn:hover {
  color: #409EFF;
}
.chat-history {
  max-height: 320px;
  overflow-y: auto;
  padding: 18px 32px 0 32px;
}
.msg-row {
  display: flex;
  align-items: flex-end;
  margin-bottom: 12px;
}
.msg-row.user {
  flex-direction: row-reverse;
}
.avatar-box {
  flex-shrink: 0;
}
.msg-bubble {
  background: #f5f7fa;
  border-radius: 16px;
  padding: 8px 16px;
  margin: 0 10px;
  max-width: 70%;
  font-size: 15px;
  color: #333;
  word-break: break-all;
}
.msg-row.user .msg-bubble {
  background: #e6f7ff;
  color: #409EFF;
}
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px 0 32px;
}
.chat-input {
  flex: 1;
}
.ai-chat-dialog-collapsed {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  padding: 10px 32px;
  margin: 0 0 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 90px;
}
.collapsed-bar {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 14px;
}
.collapsed-title {
  font-size: 16px;
  font-weight: 500;
  color: #409EFF;
  margin-right: 8px;
}
.collapsed-input {
  flex: 1;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
@media (max-width: 900px) {
  .ai-chat-dialog-header,
  .chat-history,
  .chat-input-row,
  .ai-chat-dialog-collapsed {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
@media (max-width: 600px) {
  .ai-chat-dialog-wrapper {
    padding: 0 2px;
  }
  .ai-chat-dialog-expanded,
  .ai-chat-dialog-collapsed {
    border-radius: 6px;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .chat-history,
  .chat-input-row {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}
/* 收起状态下，图标、文字、输入框、按钮 */
.ai-chat-dialog-collapsed .ai-icon {
  font-size: 28px !important;
  margin-right: 8px;
}
.collapsed-title {
  font-size: 18px;
  font-weight: 600;
  color: #409EFF;
  margin-right: 10px;
}
.collapsed-input {
  flex: 1;
  font-size: 16px;
  height: 36px;
}
.ai-chat-dialog-collapsed .el-input__inner {
  font-size: 16px;
  height: 36px;
}
.ai-chat-dialog-collapsed .el-button {
  font-size: 16px;
  height: 36px;
  padding: 0 16px;
}
</style>